import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import AccountHeader from "./AccountHeader";
import { vh, vw } from "@/common/dimensions";
import InputViewRow from "./InputViewRow";
import TextButton from "../../components/TextButton";
import GlobalModal from "@/components/GlobalModal";
import { PASSWORD_RULE, USER_NAME } from "@/config/reg";
import { accountLoginServer } from "@/servers/app-servers";
export default function Register() {
	const [usernameValue, setUsernameValue] = useState<string>("");
	const [passwordValue, setPasswordValue] = useState<string>("");
    const [confirmPasswordValue, setConfirmPasswordValue] = useState<string>("");
    const [usernameError, setUsernameError] = useState<string | null>(null); // 用户名错误状态
	const [passwordError, setPasswordError] = useState<string | null>(null); // 密码错误状态
    const [confirmPasswordError, setConfirmPasswordError] = useState<string | null>(null); // 确认密码错误状态
	const [showModal, setShowModal] = useState(false);

    // 校验账号
	const changeUsername = (value: string) => {
		setUsernameValue(value);
        if (!USER_NAME.test(value)) {
			setUsernameError("账号名应为3-20位的字母或数字");
		} else {
			setUsernameError(null);
		}
        if(!value) setUsernameError(null);
	};

    // 校验密码
	const changePassword = (value: string) => {
		setPasswordValue(value);
        if (!PASSWORD_RULE.test(value)) {
			setPasswordError("密码应为6-20位，包含字母和数字");
		} else {
			setPasswordError(null);
		}
        if(!value) setPasswordError(null);

        // 如果用户输入了确认密码，则验证两次密码是否一致
		if (confirmPasswordValue && value !== confirmPasswordValue) {
			setConfirmPasswordError("两次输入的密码不一致");
		} else {
			setConfirmPasswordError(null);
		}
	};

    // 校验确认密码
	const changeConfirmPassword = (value: string) => {
		setConfirmPasswordValue(value);
		if (value !== passwordValue) {
			setConfirmPasswordError("两次输入的密码不一致");
		} else {
			setConfirmPasswordError(null);
		}
		if (!value) setConfirmPasswordError(null);
	};

	const hideModal = () => {
		setShowModal(false);
	};

	const submit = async () => {
        if(!isFormValid){
            setShowModal(true)
            return
        }
        let option = {
            user_name : usernameValue,
            password: passwordValue
        }
        // const res = await accountLoginServer(option)
        // const { code , data , msg } = res
        // if(code !== 0){
        //     console.log("msg" , msg);
        // }else{
        //     console.log("登录成功" , data);   
        // }
	};

	// 检查表单是否有效
	const isFormValid = !usernameError && !passwordError && !confirmPasswordError && usernameValue && passwordValue && confirmPasswordValue;
	return (
		<View style={styles.loginContainer}>
			<AccountHeader />
			<View style={{ marginTop: 36 }}>
				<InputViewRow
					onChangeText={changeUsername}
					value={usernameValue}
					label="账号"
				/>
                {usernameError && <Text style={styles.errorText}>{usernameError}</Text>}
				<InputViewRow
					onChangeText={changePassword}
					label="密码"
					isPassword={true}
					value={passwordValue}
				/>
                {passwordError && <Text style={styles.errorText}>{passwordError}</Text>}
                <InputViewRow
					onChangeText={changeConfirmPassword}
					label="确认密码"
					isPassword={true}
					value={confirmPasswordValue}
				/>
                {confirmPasswordError && <Text style={styles.errorText}>{confirmPasswordError}</Text>}
			</View>
			<View style={styles.buttonLayout}>
				<TextButton
					backgroundColor="#fff69c"
					buttonText="注册并登录"
					onPress={submit}
                    disabled={!isFormValid} // 禁用登录按钮
				/>
			</View>
			<GlobalModal
				visible={showModal}
				modalProps={{
					title: "温馨提示",
					content: `账号应为3-20位的字母或数字;\n密码应为6-20位，包含字母和数字\n两次密码保持一直\n请检查输入内容`,
					// cancelText: "取消",
					confirmText: "确定",
					onCancel: hideModal,
					onConfirm: hideModal,
                    hideModal:hideModal
				}}
			/>
		</View>
	);
}

const styles = StyleSheet.create({
	loginContainer: {
		paddingTop: 16 * vw,
		paddingHorizontal: 6 * vw,
		backgroundColor: "#fff",
		height: 100 * vh,
	},
	inputViewRow: {
		borderBottomColor: "#ececec",
		borderBottomWidth: 1,
		marginTop: 12,
		paddingBottom: 10,
	},
	label: {
		fontSize: 15,
		fontWeight: "500",
	},
	input: {
		fontSize: 12,
	},
	buttonLayout: {
		position: "absolute",
		bottom: 30,
		left: 6 * vw,
		width: "100%",
	},
    errorText: {
		color: "red", // 错误提示的红色文字
		fontSize: 10,
	},
});
